<% if mobile? %>
  <div class="mobile-product-show">
    <% content_for :mobile_menu do %>
    <a href=""></a>
    <% end %>
    <% content_for :app_back do %>
    <a href="javascript:void(0)" onclick="history.go(-1)">
      <i class="icon-arrow-left"></i>
    </a>
    <% end %>
    <% content_for :app_title do %>
      商品详情
    <% end %>
    <% content_for :app_action do %>
    <a href=""></a>
    <% end %>

    <mobile-product :product-data="<%= @product.to_json %>"></mobile-product>

    <div class="product-carousel">
      <home-carousel :imgs-data="<%= @product_images.to_json %>" :is-order="true"></home-carousel>
    </div>

    <div class="product-info">
      <h1 class="title"><%= @product.title %></h1>
      <h2 class="price">
        <span class="pull-right text-mid-line">￥<%= @product.price %></span>
        <span class="text-red">￥<%= @product.msrp %></span>
      </h2>
      <h3 class="infos">
        <span>品牌：<%= @product.brand_title %></span>
      </h3>
    </div>

    <hr class="line">

    <div class="product-content">
      <% if @promotions.present? %>
        <% @promotions.each do |promotion| %>
          <div class="good-item">
            <span class="dot"></span>
            【<%= promotion.title %>】：<%= promotion.desc %> - ￥<%= promotion.discount * @product.price %>
          </div>
        <% end %>
      <% else %>
          <div class="good-item">
            <span class="dot"></span>
            暂无优惠
          </div>
      <% end %>

      <hr>

      <p>
        <%= @product.final_summary %>
      </p>
    </div>

    <hr class="line">

    <div class="product-tabs">
      <div class="tab-link active">商品详情</div>
      <!-- <div class="tab-link">商品详情</div>
      <div class="tab-link">商品详情</div> -->
    </div>

    <div class="product-tab-panel">
      <%= sanitize @product.desc %>
    </div>

  </div>

<% else %>

  <% breadcrumb :product, @product %>
  <div class="products-show hidden-xs">
    <div class="panel">
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-4">
            <product-images :all-images="<%= @product_images.to_json %>" />
          </div>
          <div class="col-sm-6 infos-col">
            <div class="row margin-reset title">
              <h1 class="title"><%= @product.title %></h1>
            </div>

            <div class="row info-col">
              <div class="col-sm-12">
                品牌：<span class="normal-color"><%= @product.brand_title %></span>
              </div>
              <div class="col-sm-6 ">
                价格：<span class="text-red new-price">￥<%= @product.msrp %></span>
              </div>
              <div class="col-sm-6">
                市场价：<span class="mid-line">￥<%= @product.price %></span>
              </div>
            </div>

            <div class="row info-col">
              <% @product.properties.each_slice(2) do |ary| %>
                <% ary.each do |prop| %>
                <div class="col-sm-6">
                  <%= prop.item_type %>：<span class="normal-color"><%= prop.item_value %></span>
                </div>
                <% end %>
              <% end %>
            </div>

            <hr>

            <div class="row margin-reset power-list">
              <ul>
                <li>
                  <span class="dot"></span>
                  25年大品牌，工厂直销，5年超长质保，专业金牌服务 ，100万家庭的选择，您值得拥有
                </li>
                <% @promotions.each do |promotion| %>
                  <li>
                    <span class="dot"></span>
                    【<%= promotion.title %>】：<%= promotion.desc %> - ￥<%= promotion.discount * @product.price %>
                  </li>
                <% end %>
              </ul>
            </div>

            <hr>

            <p class="normal-color">
              <%= @product.final_summary %>
            </p>

            <div class="row margin-reset info-row">

              <% if @product.finished? %>
              <div class="row margin-reset total-price">
                <total-price :total="<%= @product.msrp %>"></total-price>
              </div>
              <% end %>

              <div class="row margin-reset btns-row">
                <% if @product.finished? %>
                <shopping-modal inline-template>
                  <div>
                    <button class="btn btn-primary btn-lg" @click="addToCart(<%= @product.id %>)">
                      <i class="fa fa-shopping-cart"></i>
                      添加购物车
                    </button>
                    <modal v-model="modal.visible" :verify="true" :modal-id="2" @modal-cancel-event="customCancelEvent" @modal-ok-event="customOkEvent" :cancel-text="modal.cancelText" :ok-text="modal.okText">
                      <p v-html="content"></p>
                    </modal>
                  </div>
                </shopping-modal>
              <% else %>
                <div>
                  <button class="btn btn-warning btn-lg" @click="goToReserve">
                    预约测量&nbsp;&nbsp;<i class="fa fa-shopping-cart"></i>
                  </button>
                </div>
                <% end %>
              </div>
              <div class="row shared-footer">
                <div class="col-sm-3 qrcode-div">
                  <i class="fa fa-mobile-phone"></i>
                  手机扫码
                  <qrcode cls="qrcode" value="<%= product_url(@product) %>"></qrcode>
                </div>
                <div class="col-sm-4 share-links-div">
                  <i class="fa fa-share-alt"></i>
                  分享商品
                  <div class="share-links">
                    <%= render partial: 'shared/sharing' %>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-sm-2 right-slider">
            <h3 class="related">相关产品</h3>

            <product-slider-bar :product-id="<%= @product.id %>" />
          </div>
        </div>
      </div>
    </div>

    <div class="panel detail-panel">
      <div class="panel-heading">
        <ul class="nav nav-pills">
          <li role="presentation" class="active">
            <a href="#">商品详情</a>
          </li>
        </ul>
      </div>

      <div class="panel-body product-detail-panel-body">
        <%= sanitize @product.desc %>
      </div>
    </div>
  </div>

<% end %>
